//对外暴露对象html引入
//以iife的形式让执行网页的时候自动传参window 把属性挂在window上就可以直接作为window的自定义属性使用
//限量字体不够小 容器边框圆角 仅限活动商品使用处渐变 优惠券中边凹进去 折后的字体不够小 价格显示略微奇怪 vertical-align使用有问题 图片对齐和文本居中 商品信息通过发送请求获得 小红条下标
(function(w) {
	//	直接在w上添加属性方法被使用时可能和window上的其他属性方法重名，所以使用damu作为中间一级以减少命名冲突的风险
	w.damu = {}
		//传入一个存放图片地址的数组即可在滑屏区域carousel-wrap制作轮播图  手指拖动时会跟着走 超过1/2跳转页面  无缝 自动 小点点指示
	w.damu.swiper = function(arr) {
		//首先获取滑屏区域
		var carouselWrap = document.querySelector('.carousel-wrap')
			//查看是否需要无缝 需要的话将数组进行二次拼接 移动到最后一张和第一张的时候分别跳转拼接数组对应索引的那张 
			//为了获取跳转索引的时候方便一点 这里用变量pointlength进行存储
		var pointlength = arr.length
		if(carouselWrap.getAttribute("needCarousel")) {
			arr = arr.concat(arr)
		}
		//制造滑屏元素
		var carouselList = document.createElement('ul')
		carouselList.classList.add('carousel-list')
		carouselList.classList.add('clearfix')
			//根据数组给carouselList添加元素
		for(let i = 0; i < arr.length; i++) {
			carouselList.innerHTML += `<li class="item"><a><img src="${arr[i]}"/></a></li>`
		}
		carouselWrap.appendChild(carouselList)
			//因为carouselList是动态添加的 这个块的样式可以抽象出来作为一个css模块,把可有可无的样式抽出来 这样html就可以根据是否有对应的wrap来决定要不要引入
		var styleNode = document.createElement('style')
			//courseList的宽度可以用所有图片的数量乘以父容器的宽度 这里用百分比表示更好 图片的宽度取父容器的宽度
		styleNode.innerHTML = `.carousel-list{width:${arr.length}00%;}.item{width:${1 / arr.length * 100}%}`
		document.head.appendChild(styleNode)
			//debugger
		var imgs = document.querySelectorAll(".item img")
			//给出一个类似@rem的便于计算的中间单位
		var target = 750
		var rem = document.documentElement.clientWidth / target
			//debugger
			//涉及变量的计算全部放到{}里
			//当一个变量是选中的多个元素时,给它们设置样式要通过循环遍历
			//imgs.setAttribute('height',`${454*rem}px`)  无效
			//		for(let i = 0; i < imgs.length; i++) {
			//			//imgs[i].setAttribute('height',`${454*rem}px`)
			//			imgs[i].style.height = 454 * rem + "px"
			//		}

		var pointWrap = document.querySelector('.carousel-wrap .point-wrap')
			//小圆点 无论有没有轮播只要有pointWrap区域都要创建小圆点 小圆点会随着图片的切换而切换 这种切换表现为样式的改变 通过动态删除和添加class处理
		var spanpoint
		if(pointWrap) {
			for(let i = 0; i < pointlength; i++) {
				if(i === 0)
					pointWrap.innerHTML += "<span class='active'></span>"
				else pointWrap.innerHTML += "<span></span>"
			}
			spanpoint = document.querySelectorAll('.point-wrap > span')
		}
		//手指滑动多少元素就滑动多少 拿到元素和手指的开始位置后在touchmove计算 所以定义要在外面 定义变量的时候看是否公用来决定定义地方
		//防止抖动 在一次move过程的第一次move就确定方向 只水平或者垂直移动
		var startX = 0
		var startY = 0
		var elementX = 0
		var isFirst = true
		var isX = true
			//index用来标识图片 放在公共位置 图片改变了时候就修改index 逻辑执行完的index一般是当时图片的下标 因为是通过index最后修改完毕然后进行图片跳转的
		var index = 0
		carouselWrap.addEventListener('touchstart', function(ev) {
			ev = ev || event
			var touchc = ev.changedTouches[0]
			startX = touchc.clientX
			startY = touchc.clientY
			isFirst = true
				//			如果不重置的话第一次是垂直滑动后isX就一直是false了 无法再进行水平滑动
			isX = true
				//			需要对元素位置进行重置 第一次偏移到某个地方后 第二个再次移动手指的距离应该是在原来的元素位置累加 而不是从element=0开始
				//			debugger
			elementX = damu.css(carouselList, 'translateX')
			carouselList.style.transition = 'none'
			clearInterval(timer)

		})
		carouselWrap.addEventListener('touchmove', function(ev) {
			if(!isX) return
			ev = ev || event
			var touchc = ev.changedTouches[0];
			var nowX = touchc.clientX
			var nowY = touchc.clientY
			if(isFirst) {
				isFirst = false
					//				debugger
				if(Math.abs((nowY - startY)) > Math.abs((nowX - startX))) {
					isX = false
					return
				}
			}
			//实现元素随手指移动 在现有偏移量的基础上进行移动,需要有一个存储现有偏移量的东西
			//我们使用对象的属性来对偏移量进行读取和写入
			damu.css(carouselList, 'translateX', elementX + nowX - startX)
				//carouselList.style.transform = `translateX(${elementX+nowX-startX}px)`
		})
		carouselWrap.addEventListener('touchend', function(ev) {
			ev = ev || event
				//滑屏到最左边或者最右边的时候需要设置一个边界 超过就不能滑动
				//以图片的位置下标作为这个边界 用carouselList的偏移量除以视口宽度 得到的值是当前显示图片的索引的相反值 因为图片的索引有边界所以这个相反值也有边界
			index = -damu.css(carouselList, 'translateX') / document.documentElement.clientWidth
				//视口的宽度是clientWidth 手指的坐标clientX
				//取反后这个index就是当前正在显示元素的下标
				//四舍五入如果没翻转过一半就是原来图片的下标 否则就是下一张
			index = Math.round(index)
			if(index < 0) index = 0
			if(index > arr.length - 1) index = arr.length - 1
				//在松手的时候添加过渡效果 在重新划屏的时候取消效果 我们希望手指滑动的时候元素正常跟着走 而松手的时候则慢一点
			carouselList.style.transition = '.4s transform'
				//松手的时候如果是第一张或者最后一张都需要进行index转移
			if(index === 0) {
				index = pointlength
				carouselList.style.transition = 'none'
			}
			if(index === arr.length - 1) {
				index = pointlength - 1
				carouselList.style.transition = 'none'
			}
			//根据取整后的index乘以视口宽度来重新写入偏移量 确保图片整张显示
			damu.css(carouselList, 'translateX', -index * document.documentElement.clientWidth)

			if(carouselWrap.getAttribute('needAuto')) {
				auto()
			}
			if(pointWrap) {
				xiaoyuandian(index)
			}
		})

		function xiaoyuandian(index) {
			//对显示小圆点的下标进行切换
			for(let i = 0; i < spanpoint.length; i++) {
				spanpoint[i].classList.remove('active')
			}
			spanpoint[index % pointlength].classList.add('active')
		}
		//没有无缝的话松手时如果是第一张或最后一张就会回到第一张和最后一张 有无缝的时候点击发现是第一张或最后一张会跳转到对应都有图片的那个索引
		//最开始的第一张一定是index=0 进行转移
		if(carouselWrap.getAttribute("needCarousel")) {
			if(index === 0) index = pointlength
			damu.css(carouselList, 'translateX', -index * document.documentElement.clientWidth)
		}

		var timer = 0
			//把自动播放的操作封装起来 如果拖动图片则在touchstart中消除定时器 然后在touchend中重新开启 
		if(carouselWrap.getAttribute("needAuto")) {
			auto()
		}

		function auto() {
			clearInterval(timer)
			timer = setInterval(function() {
				//刚转动一张图片就被关闭定时器
				//clearInterval(timer)
				//用这个方式的话最后一张到第一张的时候没有过渡效果但是也会花费1s 感觉没有很流畅
				//if(index === arr.length - 1) {
				//	carouselList.style.transition = 'none'
				//	index = 0
				//	damu.css(carouselList, 'translateX', 0)
				//} else {
				//	index++
				//	carouselList.style.transition = '.3s transform'
				//	damu.css(carouselList, 'translateX', -index * document.documentElement.clientWidth)
				//	}
				if(index === arr.length - 1) {
					carouselList.style.transition = 'none'
						//刚切换到这张的时候就会马上切下一张 在同样的时间里切了两次 有点奇怪
						//index=pointlength
						//到达最后一张没得切的时候瞬间切换到第一个数组最后一个元素然后就可以继续往下切 同时交替显示的图片都是自己本身 肉眼看不出来切换 
						//因为定时器循环的每段时间都有在开头留一部分时间查看是否需要切换自己本身 在这段时间有无切换用户无法察觉
					index = pointlength - 1
					damu.css(carouselList, 'translateX', -index * document.documentElement.clientWidth)
				}
				setTimeout(function() {
					index++
					carouselList.style.transition = '1s transform'
					damu.css(carouselList, 'translateX', -index * document.documentElement.clientWidth)
					if(pointWrap) {
						xiaoyuandian(index)
					}
				}, 40)
			}, 2000)

		}

	}

	//给dom元素绑一个属性transform 用来存储元素transform样式的过渡
	w.damu.css = function(node, type, val) {
			//先检测是否存在trandform属性 如果node不存在的话也会返回undefined所以需要也判断
			if(typeof node === 'object' && typeof node['transform'] === 'undefined') {
				node['transform'] = {}
					//node.transform={}
			}
			if(arguments.length >= 3) {
				node['transform'][type] = val
					//写入后对transform对象的属性进行遍历重新拼接出一个表示transform样式的text文本
				var text = ''
				for(item in node['transform']) {
					//因为拼接的单位不同 有的是deg 有的是px所以需要使用分支语句判断拼接
					switch(item) {
						case 'translateX':
						case 'translateY':
							text += `${item}(${node['transform'][item]}px)`
							break
						case 'scaleX':
						case 'scaleY':
							text += `${item}(node['transform'][item])`
							break
						case 'rotateX':
						case 'rotateY':
							text += `${item}(${node['transform'][item]}deg)`
					}
				}
				node.style.transform = text
			} else {
				var re = node['transform'][type]
					//对没有定义的情况进行处理
				if(typeof re === 'undefined') {
					switch(type) {
						case 'translateX':
						case 'translateY':
						case 'rotateX':
						case 'rotateY':
							re = 0
							break
						case 'scaleX':
						case 'scaleY':
							re = 1

					}
				}
				return re
			}
		}
		//写完代码发现效果与设想不一致先看控制台然后在浏览器源代码处修改
	damu.drag = function() {
		var navWrap = document.querySelector('.nav')
		var navLis = document.querySelector('.nav-list')
		var maskButton = document.querySelector('.mask-btn')
			//实现滑屏 本次滑屏界限不以图片下标来表示 而是计算出最大最小偏移量
		var min = navLis.offsetWidth - navWrap.offsetWidth + maskButton.offsetWidth
		var startX = 0
		var startY = 0 //防抖动
		var elementX = 0
		var isFirst = true
		var isX = true
		navWrap.addEventListener('touchstart', function(ev) {
			ev = ev || event
			var touchc = ev.changedTouches[0]
			startX = touchc.clientX
			startY = touchc.clientY
			elementX = damu.css(navLis, 'translateX')
			isFirst = true
			isX = true
			navLis.style.transition='none'
		})
		navWrap.addEventListener('touchmove', function(ev) {
			if(!isX) return
			ev = ev || event
			var touchc = ev.changedTouches[0]
			var nowX = touchc.clientX
			var nowY = touchc.clientY
			var translateX = elementX + nowX - startX
			if(isFirst) {
				if(Math.abs(nowY - startY) > Math.abs(nowX - startX)) {
					isX = false
					return
				}
			}
			//左边有橡皮筋右边没有
			if(translateX > 0) {
				//拖拽边沿时 元素添加的距离越来越少 也就是说nowX-startX要乘以一个越来越小的比例作为新增距离 这个比例要和原本橡皮筋区域的偏移量相关 
				var scale = navWrap.offsetWidth / ((navWrap.offsetWidth + elementX + nowX - startX) * 1.5)
				translateX = elementX + scale * (nowX - startX)
			}
			if(translateX < -min){
				var scale = navWrap.offsetWidth / ((navWrap.offsetWidth -min-translateX) * 1.5)
				translateX = elementX + scale * (nowX - startX)
			}
			damu.css(navLis, 'translateX', translateX)

		})
		navWrap.addEventListener('touchend', function() { //偏离量超界需要让他们回去
			if(damu.css(navLis, 'translateX') > 0){
				damu.css(navLis, 'translateX', 0)
			}
			if(damu.css(navLis, 'translateX') < -min){
				damu.css(navLis, 'translateX', -min)
			}
				navLis.style.transition='1s transform'
			
			//快速滚动
		})
	}
})(window)